<template>
  <div>
  <div id="content" style="height:1200px"></div>
  </div>


</template>

<script>

import china from "../../assets/china";
import echarts from "echarts";
import mapData from "../../assets/data";
import axios from 'axios'
export default {
  data() {
    return {
        mapData,
        dataList:[],
        cityname:'',
        center:0,
    };
  },
  destroyed() {
    clearInterval(this.id);
  },
  mounted() {
    this.getData()
    this.initeCharts()
  },
methods: {
    initeCharts1(name,center) {
      axios.defaults.baseURL = ''
        axios.get("./guangxi.json").then((res) => {
          echarts.registerMap(name, res)
          echarts.init(document.getElementById("content")).dispose(); 
          var myChart = echarts.init(document.getElementById("content"));
          var option = {
          geo: {
          type: 'map',
          map: name,
          zoom: 0.8,
          roam: true,
          label: {
            show: true
          },
          center:center// 这个坐标值, 我们是可以通过地图矢量数据获取到的
          }
          }
          myChart.setOption(option)
          // console.log(1)
          // this.initeCharts1('guangxi',res.features[0].properties.center)
        });
         
    },
    getData() {
         let res = this.mapData.data.list.map((item) => {
          // console.log(item);
          return {
            name: item.name,
            value: item.econNum,
          };
        });
        this.dataList = res;
    },
    initeCharts() {
      var myChart = echarts.init(document.getElementById("content"));
      var option = {
        tooltip: {
        //数据格式化
        formatter: function (params, callback) {
        return (
        params.seriesName + "<br />" + params.name + "：" + params.value
        );
        },
        },
        backgroundColor: '#013954',
        color: ["#ac6767", "#1d953f", "#ff3333", "#6950a1", "#918597"],
        visualMap: {
          min: 0,
          max: 10,
          left: "left",
          top: "bottom",
          text: ["高", "低"], //取值范围的文字
          inRange: {
            color: [
              "#e0ffff",
              "#FFCCD6",
              "#ff9933",
              "red",
            ], //取值范围的颜色
          },
          show: true, //图注
        },
        series: [{
          type: 'map',
          map: 'china',
          data:this.dataList
        }]
      }
      myChart.setOption(option);
      myChart.on("click", (params) => {

        axios.defaults.baseURL = ''
        axios.get("./guangxi.json").then((res) => {
        this.initeCharts1('guangxi',res.features[0].properties.center)
        });
        // axios.defaults.baseURL = ''
        // axios.get("./guangxi.json").then((res) => {
        //   echarts.registerMap('guangxi', res)
        //   var myChart = echarts.init(document.getElementById("content"));
        //   var option = {
        //   geo: {
        //   type: 'map',
        //   map: 'guangxi',
        //   zoom: 1.2,
        //   label: {
        //     show: true
        //   },
        //   center:[108.320004,22.82402]// 这个坐标值, 我们是可以通过地图矢量数据获取到的
        //   }
        //   }
        //   myChart.setOption(option)
        //   // console.log(1)
        //   // this.initeCharts1('guangxi',res.features[0].properties.center)
        // });

      });
    },
  },
};
</script>
